<!--
<style>
.autoDiv {
  border:1px solid #ccc;
  max-height:400px; 
  height:expression(width>300?"300px":height+"px"); 
  overflow-y:auto;
}
</style>
  -->

<div id="imgSelectVue">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="imgSelModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-backdrop="true">
        <div class="modal-dialog  modal-lg">
            <div class="modal-content"> 
                <div class="modal-body " style="padding: 0px;">
                        <div  class="panel panel-default"  style="margin: 0px;" >
					        <div class="panel-heading" style="margin: 0px;padding: 0px;" >
					            <ol class="breadcrumb" style="margin: 0px;">
					                <li v-for="(item,index) in dirLayers"><button class="btn btn-link" v-on:click="dirLayerSel(item.id,index)" style="padding: 0px">{{item.name}}</button></li>
					            </ol>
					        </div>
					        <div class="panel-body autoDiv">
					            <!--图片路径列表-->
					            <template v-for="(item,index) in items" style="list-style-type:none">
					                <div class="panel col-sm-2 column" >
					                    <div class="panel-body  " style="padding: 0px; margin: 0px; "   >
					                        <div v-if="item.type == 'img'">
					                            <img :src="loadImgUrl+item.id" class="img-thumbnail dirImg"  tabindex="0"  @dblclick="select(item.id)" />
					                        </div>
					                        <div v-if="item.type == 'dir'">
					                            <img src="/img/fileIcon.jpg" class="img-thumbnail dirImg"  tabindex="0" @dblclick="dblClickDir(item.id,index)" />
					                        </div> 
					                    </div>
					                    <div class="panel-footer" style="padding: 0px; margin: 0px;">
					                        <span>{{item.name.length > 10 ? item.name.substring(0,10)+'...' : item.name}}</span>
					                    </div>
					                </div>
                                    <template v-if="(index + 1) % 6 == 0">
                                        <div style="color: white"  align="center">-我是分隔符-</div>
                                    </template>
					            </template>
					        </div>
					 	</div><!-- panel结束 -->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<script>
    //采用vue
   var imgSelectVue=new Vue({
        el: '#imgSelectVue',
        data: {
            loadImgUrl: Vue.prototype.getUrl('/config/img/loadImg/small/'),
            loadDirs : Vue.prototype.getUrl('/config/img/getImageDirs/'),
            items : [], //页面上显示的内容
            dirLayers:[{type:'dir',name:'根目录',id:'1'}], //存放路径层上的文件夹对象 
        },
        methods: {
        	/**
            * 图片双击选择事件
            */
            select: function (id) {
                this.selectedImg(id);//引用的文件复写这个方法就可以被调用
                $('#imgSelModal').modal('hide'); //隐藏模态框
            }, 
            /**
            * 文件夹双击事件
            */
            dblClickDir:function (id,index) {
                //1加入队列
                this.dirLayers.push(this.items[index]); 
                //2发请求重载对应文件夹的列表
                this.loadDirsAndImgs(id);
            },
            /*
            *选择文件夹层结构后的事件
            */
            dirLayerSel:function (id,index) { 
                //1删除队列以后
                this.dirLayers = this.dirLayers.slice(0,index+1); 
                //2发请求重载对应文件夹的列表
                this.loadDirsAndImgs(id);
            },
            /*根据文件夹id获取对应的图片和文件夹*/
            loadDirsAndImgs:function(id){
                this.$http.post(this.loadDirs+id).then(function(data){
                    console.log(this.loadDirs+': '+data.data.success);
                    if(data.data.success){
                        //将自己的
                        this.items = data.data.data;
                    }else{
                        alert("查询列表失败："+data.data.errorMessage);
                    }
                }).catch(function(){
                    alert('loadDirsAndImgs 服务器异常！');
                });
            },
        },
        created: function () {
              //加载顶层文件夹
            this.loadDirsAndImgs(1);
        },
    });
</script>